<template>
  <div id="authForm" :style="backgroudImage">
    <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane key="login" tab="登录">
        <UserLoginPage @focusPassword="focusPassword"
                       @blurPassword="blurPassword"
                       @changeActiveKey="changeActiveKey" />
      </a-tab-pane>
      <a-tab-pane key="register" tab="注册" force-render>
        <UserRegisterPage @focusPassword="focusPassword"
                          @blurPassword="blurPassword"
                          @changeActiveKey="changeActiveKey" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue'
import UserLoginPage from '@/pages/user/UserLoginPage.vue'
import UserRegisterPage from '@/pages/user/UserRegisterPage.vue'
import {message} from "ant-design-vue";

const activeKey = ref<'login' | 'register'>('login')

const backgroudImage = ref('background-image: url("src/assets/loginLeft.png"),url("src/assets/loginRight.png")')

const focusPassword = () => {
  backgroudImage.value = 'background-image: url("src/assets/pwdLeft.png"),url("src/assets/pwdRight.png")'
}
const blurPassword = () => {
  backgroudImage.value = 'background-image: url("src/assets/loginLeft.png"),url("src/assets/loginRight.png")'
}

const changeActiveKey = () => {
  if (activeKey.value === 'login'){
    activeKey.value ='register'
    return
  }
  activeKey.value = 'login'
}
</script>

<style scoped>
#authForm {
  //background-image: url('src/assets/loginLeft.png'), url('src/assets/loginRight.png');
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 14%;
  position: relative;
}
</style>
